import { Meta, StoryObj } from "@storybook/react";
import { AlarmSounding } from "components";
import { useState } from "react";
import { Button } from "tdesign-react";
const meta: Meta<typeof AlarmSounding> = {
  title: "Component/Sound",
  component: AlarmSounding,
  tags: ["autodocs"],
  parameters: {
    layout: "padded", // fullscreen//centered//padded
  },

  decorators: [
    (Story) => {
      const [isAlarm, setIsAlarm] = useState(true);
      const [isAlarmSounding, setIsAlarmSounding] = useState(true);

      // 离线
      const [isOffline, setIsOffline] = useState(true);
      const [isOfflineSounding, setIsOfflineSounding] = useState(true);

      return (
        <div className="gap-5 flex">
          <Button onClick={() => setIsAlarm(!isAlarm)}>切换报警状态</Button>
          <Button onClick={() => setIsAlarmSounding(!isAlarmSounding)}>
            切换报警声音状态
          </Button>
          <Story args={{ isAlarm, isAlarmSounding }} />

          <Button onClick={() => setIsOffline(!isOffline)}>切换离线状态</Button>
          <Button onClick={() => setIsOfflineSounding(!isOfflineSounding)}>
            切换离线声音状态
          </Button>
          <Story args={{ isOffline, isOfflineSounding }} />
        </div>
      );
    },
  ],
};

export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
  name: "温度报警",
  args: {
    isAlarm: true,
    isAlarmSounding: true,
  },
};
